<template>
  <!--<div class="hello">-->
    <!--<h1>{{ msg }}</h1>-->
  <!--</div>-->

    <div class="test">
        <keep-alive>
          <component :is="currentView"></component>
        </keep-alive>
        <span @click="show">更改</span>
    </div>

</template>

<script>
import Hello from './../components/Hello'
import Test from './../components/test'
export default {
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      show:true,
      auth:0,
      currentView: 'Hello'
    }
  },
  components: {
    Hello,
    Test
  },
  methods:{
    show:function(){
      if(this.currentView=='Hello') {
        this.currentView = 'Test';
      }else{
        this.currentView = 'Hello';
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  color: #42b983;
}
</style>
